// 获取文章列表
const queryObj = {
    status: '',
    channel_id: '',
    page: 1,
    per_page: 2
}

// 保存文章总条数
let totalCount = 0

// 1.1 获取查询文章列表数据
async function setArtileList() {
    const res = await axios({
        url: '/v1_0/mp/articles',
        params: queryObj
    })
    console.log(res);
    const htmlStr = res.data.results.map((item) => {
        return `  <tr>
                <td>
                  <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500` : item.cover.images[0]}" alt="">
                </td>
                <td>${item.title}</td>
                <td>
                ${item.status === 1 ? `<span class="badge text-bg-success">审核通过</span >` : `<span class="badge text-bg-primary">待审核</span>`} 
                </td>
                <td>
                  <span>${item.pubdate}</span>
                </td>
                <td>
                  <span>${item.read_count}</span>
                </td>
                <td>
                  <span>${item.comment_count}</span>
                </td>
                <td>
                  <span>${item.like_count}</span>
                </td>
                <td data-id="${item.id}">
                  <i class="bi bi-pencil-square edit"></i>
                  <i class="bi bi-trash3 del"></i>
                </td>
            </tr>`
    }).join('')
    document.querySelector('.art-list').innerHTML = htmlStr
    document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
    totalCount = res.data.total_count
    document.querySelector('.total-count').innerHTML = `共${totalCount}条`

}
setArtileList()

// 1.2 设置频道列表数据
async function setChannleList() {
    const res = await axios({
        url: '/v1_0/channels'
    })
    const htmlStr = `<option value="">请选择频道文章</option>` + res.data.channels.map(item => {
        return `<option value="${item.id}">${item.name}</option>`
    }).join('')
    document.querySelector('.form-select').innerHTML = htmlStr
}
setChannleList()

// 2.1 设置筛选条件-单选框
document.querySelectorAll('.form-check-input').forEach(radio => {
    radio.addEventListener('change', e => {
        // 查询参数绑定数据
        queryObj.status = e.target.value
    })
})

// 2.2 筛选频道id
document.querySelector('.form-select').addEventListener('change', e => {
    // 查询参数绑定数据
    queryObj.channel_id = e.target.value
})

// 2.3 点击筛选按钮重新查询文章列表
document.querySelector('.sel-btn').addEventListener('click', () => {
    queryObj.page = 1
    setArtileList()
})

// 3.1 点击下一页的翻页操作
document.querySelector('.next').addEventListener('click', e => {
    if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
        queryObj.page++
        //document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        setArtileList()
    }
})
// 3.2 点击上一页的翻页操作
document.querySelector('.last').addEventListener('click', e => {
    if (queryObj.page > 1) {
        queryObj.page--
        //document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        setArtileList()
    }
})

// 4.1 点击删除文章
document.querySelector('.art-list').addEventListener('click', async e => {
    if (e.target.classList.contains('del')) {
        const deleteId = e.target.parentNode.dataset.id
        const res = await axios({
            url: `/v1_0/mp/articles/${deleteId}`,
            method: 'DELETE'
        })
        console.log(res);
        // 删除最后一页的最后只有一条，自动向前翻页
        const children = document.querySelector('.art-list').children
        if (children.length === 1 && queryObj.page !== 1) {
            queryObj.page--
            // document.querySelector('.page-now').innerHTML = `第${queryObj.page}页`
        }
        // 重新展示文章列表
        setArtileList()
    }
})

// 5.1 编辑文章
document.querySelector('.art-list').addEventListener('click', e => {
    if (e.target.classList.contains('edit')) {
        const artId = e.target.parentNode.dataset.id
        console.log(artId);
        // 跳转到公用的编辑页面
        location.href = `../publish/index.html?id=${artId}`
    }
})






